<template>
    <div
        class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-100 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4">
        <div
            class="w-full max-w-xl bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-8 flex flex-col items-center space-y-6">
            <h2 class="text-3xl font-bold text-purple-700 dark:text-purple-300 mb-2" ref="titleRef">留言板</h2>
            <p class="text-gray-500 dark:text-gray-300 text-center mb-4" ref="descRef">
                有什么想说的都可以在这里留言，期待你的分享与建议！
            </p>
            <form @submit.prevent="submitMessage" class="w-full flex flex-col gap-4" ref="formRef">
                <input v-model="name" type="text" placeholder="你的昵称"
                    class="px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-700 outline-none bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 transition"
                    required />
                <textarea v-model="content" rows="4" placeholder="写下你的留言..."
                    class="px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-700 outline-none bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200 transition resize-none"
                    required></textarea>
                <button type="submit"
                    class="w-full py-3 rounded-lg bg-purple-500 hover:bg-purple-600 text-white font-semibold shadow transition">
                    留言
                </button>
            </form>
            <div class="w-full mt-6 space-y-4">
                <transition-group name="fade" tag="div">
                    <div v-for="(msg, idx) in messages" :key="msg.id"
                        class="bg-purple-50 dark:bg-gray-800 border border-purple-100 dark:border-gray-700 rounded-lg px-4 py-3 shadow flex flex-col"
                        :ref="el => setMsgRef(el, idx)">
                        <div class="flex items-center mb-1">
                            <span class="font-bold text-purple-700 dark:text-purple-300 mr-2">{{ msg.name }}</span>
                            <span class="text-xs text-gray-400">{{ msg.time }}</span>
                        </div>
                        <div class="text-gray-700 dark:text-gray-200 break-words">{{ msg.content }}</div>
                    </div>
                </transition-group>
                <div v-if="messages.length === 0" class="text-gray-400 text-center">暂无留言，快来抢沙发吧！</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import gsap from 'gsap'

const name = ref('')
const content = ref('')
const messages = ref<{ id: number, name: string, content: string, time: string }[]>([])

const titleRef = ref()
const descRef = ref()
const formRef = ref()
const msgRefs = ref<HTMLElement[]>([])

import type { ComponentPublicInstance } from 'vue'

function setMsgRef(el: Element | ComponentPublicInstance | null, idx: number) {
    // If it's a Vue component instance, get its $el
    const dom = (el && '$el' in el) ? (el as ComponentPublicInstance).$el : el
    if (dom instanceof HTMLElement) {
        msgRefs.value[idx] = dom
    }
}

function submitMessage() {
    if (!name.value.trim() || !content.value.trim()) return
    messages.value.unshift({
        id: Date.now(),
        name: name.value,
        content: content.value,
        time: new Date().toLocaleString()
    })
    name.value = ''
    content.value = ''
    nextTick(() => {
        // 新增留言动画
        if (msgRefs.value[0]) {
            gsap.fromTo(msgRefs.value[0], { y: -30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' })
        }
    })
}

// 初始动画
import { onMounted } from 'vue'
onMounted(() => {
    gsap.from(titleRef.value, { y: -40, opacity: 0, duration: 0.8, ease: 'power2.out' })
    gsap.from(descRef.value, { y: 20, opacity: 0, duration: 0.8, delay: 0.2, ease: 'power2.out' })
    gsap.from(formRef.value, { scale: 0.95, opacity: 0, duration: 0.8, delay: 0.4, ease: 'power2.out' })
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: translateY(20px);
}
</style>